<!-- Pydantic I/O Modal -->
<div id="pydanticModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden modal-backdrop">
    <div class="relative w-full max-w-3xl bg-white dark:bg-slate-900 rounded-lg shadow-xl" id="pydanticModalContent">
        <div class="flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-800">
            <h3 class="text-xl font-semibold text-slate-800 dark:text-slate-100">Pydantic Conversion</h3>
            <button id="closePydanticModalBtn" aria-label="Close modal" class="p-1 rounded-full text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </button>
        </div>
        
        <!-- Tabs -->
        <div class="border-b border-slate-200 dark:border-slate-800">
            <nav id="pydanticModalTabs" class="flex gap-4 -mb-px px-6" aria-label="Tabs">
                <button data-tab="toPydantic" class="pydantic-tab active-tab shrink-0 border-b-2 py-3 px-1 text-sm font-medium">Schema to Pydantic</button>
                <button data-tab="fromPydantic" class="pydantic-tab shrink-0 border-b-2 py-3 px-1 text-sm font-medium">Pydantic to Schema</button>
            </nav>
        </div>

        <!-- Tab Content -->
        <div id="pydanticToPydanticTab" class="p-6">
            <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">Generated Pydantic model from the current JSON schema.</p>
            <div class="relative h-96 bg-slate-50 dark:bg-slate-950 rounded-md">
                <pre class="w-full h-full text-sm leading-relaxed font-mono focus:outline-none"><code id="pydanticOutput" class="language-python block w-full h-full p-4 bg-transparent overflow-auto"></code></pre>
                <div id="pydanticLoader" class="absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-slate-900/50 backdrop-blur-sm hidden">
                    <svg class="animate-spin -ml-1 mr-3 h-8 w-8 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                    <span id="pydanticLoaderText" class="text-slate-600 dark:text-slate-300">Initializing...</span>
                </div>
            </div>
            <div class="mt-4 flex justify-end">
                <button id="copyPydanticBtn" class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-900 transition-colors">Copy Code</button>
            </div>
        </div>

        <div id="pydanticFromPydanticTab" class="p-6 hidden">
            <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">Paste your Pydantic model code below. The first class inheriting from `BaseModel` will be used.</p>
            <textarea id="pydanticInput" rows="12" class="font-mono text-sm" placeholder="from pydantic import BaseModel

class MyModel(BaseModel):
    ..."></textarea>
            <div class="mt-4 flex justify-end">
                 <button id="parsePydanticBtn" class="px-6 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-900 transition-colors">Parse and Load</button>
            </div>
        </div>
    </div>
</div>
